<template>
  <div>
    <input v-model="state.name" type="text">
    <input v-model="state.color" type="text">
    <input v-model="state.size" type="text">

    <pre lang="json">{{ state }}</pre>
  </div>
</template>

<script>
import { useStorage } from '@vueuse/core'

export default {
  data() {
    return {
      state: {
        name: 'Banana',
        color: 'Yellow',
        size: 'Medium',
      },
    };
  },
  created() {
    this.state = useStorage('vue-use-local-storage2', {
      name: this.state.name,
      color: this.state.color,
      size: this.state.size,
    }, sessionStorage)
  },
};
</script>

<style lang="scss" scoped>
</style>
